<template>
  <div class="roles">
    <mianbaoxie />
    <el-card class="box-card">
      <div class="top">
        <div style="margin-bottom: 15px;">
          <el-button type="primary" @click="dialogVisible = true">添加角色</el-button>
        </div>
      </div>
      <el-table :data="roleslist" style="width: 100%" border stripe>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div v-for="item in props.row.children" :key="item.id" style="border:1px solid #eee;border-left:0;border-rigth:0;display: flex; align-items: center;">
              <div style="display:inline-block;height:100px;width:20.83333%">
                <el-tag :disable-transitions="false" style="margin:10px 0;" closable @close.stop="open2(item,props.row)">{{item.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </div>

              <div style="display:inline-block;width:calc(100% - 20.83333%)">
                <span v-for="el in item.children" :key="el.id" style="border-bottom:1px solid #eee; padding-bottom:20px;heigth:100%;display: flex;align-items: center;">
                  <div style="width:25%;display:inline-block;">
                    <el-tag :disable-transitions="false" style="margin:10px 0 10px 30px;" @close.stop="open2(el,props.row)" closable type="success">{{el.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </div>
                  <span style="width:calc(100% - 25%);display:inline-block;">
                    <div style="display:inline-block;" v-for="it in el.children" :key="it.id">
                      <el-tag :disable-transitions="false" style="margin:10px 0 10px 30px;" @close.stop="open2(it,props.row)" :closable="true" type="danger">{{it.authName}}</el-tag>
                    </div>
                  </span>
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="#" prop="id" type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="updata(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="open(scope.row)">删除</el-button>
            <el-button size="mini" type="warning" icon="el-icon-setting" @click="quan(scope.row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加 -->
    <el-dialog title="添加角色" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <span>
        <el-form :model="addfrom" ref="addfrom" label-width="100px" class="demo-dynamic">
          <el-form-item prop="roleName" label="角色名称" :rules="[
      { required: true, message: '请输入角色名称', trigger: 'blur' },
    ]">
            <el-input v-model="addfrom.roleName"></el-input>
          </el-form-item>
          <el-form-item prop="roleDesc" label="角色描述">
            <el-input v-model="addfrom.roleDesc"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('addfrom')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改角色" :visible.sync="dialogVisible2" width="50%" :before-close="handleClose2">
      <span>
        <el-form :model="updatafrom" ref="updatafrom" label-width="100px" class="demo-dynamic">
          <el-form-item prop="roleName" label="角色名称" :rules="[
      { required: true, message: '请输入角色名称', trigger: 'blur' },
    ]">
            <el-input v-model="updatafrom.roleName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item prop="roleDesc" label="角色描述">
            <el-input v-model="updatafrom.roleDesc"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updataitem('updatafrom')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分配权限 -->
    <el-dialog title="分配权限" :visible.sync="dialogVisible3" width="50%" :before-close="handleClose3">
      <span>
        <el-tree :data="quanxianlist" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :default-checked-keys="initckecked" :props="defaultProps" res="tree"></el-tree>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="initquan('updatafrom')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mianbaoxie from "../components/mianbaoxie.vue";
import {
  initroles,
  add,
  updata,
  updataction,
  deleteitem,
  quanxian,
  quanxiansubmit,
  deletequanxian,
} from "../ulits/api/roles";
export default {
  components: { mianbaoxie },
  name: "roles",
  data() {
    return {
      // table下拉数据
      roleslist: [],
      // 添加遮罩
      dialogVisible: false,
      // 修改遮罩
      dialogVisible2: false,
      // 权限遮罩
      dialogVisible3: false,
      // 权限数据
      quanxianlist: [],
      // 选中和半选中的权限id
      checkedout: [],
      // 修改权限的角色id
      quanxianId: -1,
      //选中的权限
      initckecked: [],
      // 权限数据
      defaultProps: {
        children: "children",
        label: "authName",
      },
      // 添加数据
      addfrom: {
        username: "",
        roleDesc: "",
      },
      // 修改
      updatafrom: {
        username: "",
        roleDesc: "",
      },
    };
  },
  methods: {
    // 关闭添加弹框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.addfrom).then((res) => {
            this.Message(res);
            this.updataroles();
          });
          this.dialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 关闭修改弹框
    handleClose2(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 数据回填
    updata(row) {
      updata(row).then((res) => {
        this.updatafrom = res.data;
      });
      this.dialogVisible2 = true;
    },
    // 确认修改
    updataitem(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updataction(this.updatafrom).then((res) => {
            this.Message(res);
            this.updataroles();
          });
          this.dialogVisible2 = false;
        } else {
          return false;
        }
      });
    },
    // 关闭权限弹框
    handleClose3(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 获取权限
    quan(row) {
      this.quanxianId = row.id;
      quanxian(row).then((res) => {
        // 保存id
        let data = [];
        // 利用递归获取选中权限的id
        function fn(list) {
          list.forEach((item) => {
            if (item.children instanceof Array) {
              fn(item.children);
            } else {
              data.push(item.id);
              return;
            }
          });
          return data;
        }
        // 保存选中的id
        this.initckecked = fn(row.children);
        // 保存所有的选项
        this.quanxianlist = res.data;
      });
      this.dialogVisible3 = true;
    },
    // 确认修改权限
    initquan() {
      this.checkedout = "";
      // 获取选中的id
      let arr = this.$refs.tree.getCheckedKeys();
      // 获取半选中的id
      let arr1 = this.$refs.tree.getHalfCheckedKeys();
      this.checkedout = [...arr, ...arr1];
      quanxiansubmit(this.checkedout.toString(), this.quanxianId).then(
        (res) => {
          this.Message(res);
          this.updataroles();
        }
      );
      this.dialogVisible3 = false;
    },
    // 删除权限
    open2(item, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletequanxian({ roleId: row.id, rightId: item.id }).then((res) => {
            this.Message(res);
            // 进行重新赋值
            row.children = res.data;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除
    open(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteitem(row).then((res) => {
            this.Message(res);
            this.updataroles();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 消息提示
    Message(res) {
      if (res.meta.status >= 200 && res.meta.status < 300) {
        this.$message({
          message: res.meta.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: res.meta.msg,
          type: "error",
        });
      }
    },
    // 获取数据
    updataroles() {
      initroles().then((res) => {
        this.roleslist = res.data;
      });
    },
  },
  created() {
    // 初始化页面
    initroles().then((res) => {
      this.roleslist = res.data;
      this.Message(res);
    });
  },
};
</script>

<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>